<!DOCTYPE html>
<html lang="en">
<!-- 工艺雕塑第一套 1-4 -->

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/bootstrap4.5.min.css">
    <link rel="stylesheet" href="../css/swiper-bundle.min.css">
    <link rel="stylesheet" href="../css/public.css">
    <style>
        .img_collection_box {
            display: flex;
            flex-wrap: wrap;
        }

        .img_collection_left {
            flex: 0 0 55%;
        }

        .img_collection_left ul {
            display: flex;
        }

        .img_collection_left li {
            flex: 33.3333%;
        }

        .img_collection_left_box_img img {
            width: 100%;
        }

        .img_collection_left_box_text {
            text-align: center;
        }

        .img_collection_left_box_text p {
            margin-top: 45px;
            margin-bottom: 8px;
            font-size: var(--f_text);
            line-height: var(--l_text);
            color: var(--c_text);
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
        }

        .img_collection_left_box_text span {

            color: var(--c_tips);
            font-size: var(--f_describe);
            line-height: var(--l_describe);
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
        }

        .img_collection_right {
            flex: 0 0 45%;
            overflow: hidden;
        }

        .img_collection_right img {
            width: 100%;
            object-fit: cover;
        }

        .img_collection_right .swiper-container {
            --swiper-pagination-color: #fff;
            /* 两种都可以 */
        }

        @media screen and (max-width:768px) {
            .img_collection_left {
                flex: 100%;
            }

            .img_collection_right {
                flex: 100%;
            }

            .img_collection_left_box_text p {
                margin-top: 3px;
                margin-bottom: 2px;
            }

            .img_collection_left li {
                padding-right: 4px;
                padding-left: 4px;
                margin-top: 6px;
            }

            .img_collection_right {
                margin-top: 10px;
            }

        }

        /* 布局1 */
        .layout1 .img_collection_left li {
            padding-right: 6%;
        }

        /* 布局2 */
        .layout2 .img_collection_box {
            flex-direction: row-reverse;
        }

        .layout2 .img_collection_left li {
            padding-left: 6%;
        }

        /* 布局3 */
        .layout3 .img_collection_box {
            display: block;
        }

        .layout3 .img_collection_left li {
            padding: 0 15px;
        }

        .layout3 .img_collection_right {
            margin-top: 30px;
        }

        .layout3 .img_collection_right .swiper-container img{
            height: 600px;
        }

        @media screen and (max-width:768px) {

            .layout3 .img_collection_left li {
                padding: 6px 4px 0 4px;
                margin-top: 6px;
            }
        .layout3 .img_collection_right .swiper-container img{
            height: 300px;
        }
        }
    </style>
    <script src="../js/jquery-3.5.1.min.js"></script>
    <script src="../js/bootstrap4.5.min.js"></script>
    <script src="../js/swiper-bundle.min.js"></script>

</head>

<body>
    <div class="img_collection layout3 title_left modular">
        <div class="public_width">

            <div class="img_collection_box">
                <div class="img_collection_left">
                    <ul>
                        <li>
                            <div class="img_collection_left_box">
                                <div class="img_collection_left_box_img">
                                    <img src="../images/img_collection_3.webp" alt="">

                                </div>
                                <div class="img_collection_left_box_text">
                                    <p>规划分析预约</p>
                                    <span>我们为您提供从规划设计至现场指导的全程服务</span>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="img_collection_left_box">
                                <div class="img_collection_left_box_img">
                                    <img src="../images/img_collection_3.webp" alt="">

                                </div>
                                <div class="img_collection_left_box_text">
                                    <p>规划分析预约</p>
                                    <span>我们为您提供从规划设计至现场指导的全程服务</span>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="img_collection_left_box">
                                <div class="img_collection_left_box_img">
                                    <img src="../images/img_collection_3.webp" alt="">

                                </div>
                                <div class="img_collection_left_box_text">
                                    <p>规划分析预约</p>
                                    <span>我们为您提供从规划设计至现场指导的全程服务</span>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="img_collection_right">
                    <div class="swiper-container">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide">
                                <img src="../images/img_collection_4.webp" alt="">
                            </div>
                            <div class="swiper-slide">
                                <img src="../images/img_collection_4.webp" alt="">
                            </div>
                            <div class="swiper-slide">
                                <img src="../images/img_collection_4.webp" alt="">
                            </div>
                        </div>
                        <div class="swiper-pagination"></div>

                    </div>
                </div>
            </div>

        </div>

    </div>

    <script>
        var mySwiper = new Swiper('.swiper-container', {
            loop: true, // 循环模式选项

            // 如果需要分页器
            pagination: {
                el: '.swiper-pagination',
            },
            autoplay: {
                delay: 2000, //1秒切换一次
            },
        })
    </script>
</body>

</html>